<template>
  <div class="invoiceRecord">
    <el-form
      :model="selectFrom"
      :inline="true"
      size="mini"
      style="margin: 30px 0 0 10px"
    >
      <el-form-item label="订单号">
        <el-input
          v-model="selectFrom.orderId"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select v-model="selectFrom.sourceOrderType" clearable>
          <el-option label="机票" value="flight"></el-option>
          <el-option label="火车票" value="train"></el-option>
          <el-option label="酒店" value="hotel"></el-option>
          <el-option label="会员卡" value="vipCard"></el-option>
          <el-option label="贵宾厅" value="vipLounge"></el-option>
          <el-option label="VIP通道" value="vipChannel"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开票状态" clearable>
        <el-select v-model="selectFrom.openStatus">
          <el-option label="开票成功" value="invoiceSuccess"></el-option>
          <el-option label="开票失败" value="invoiceFailure"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票抬头">
        <el-input
          v-model="selectFrom.custname"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker
          value-format="yyyy-MM-dd"
          style="width: 180px"
          v-model="selectFrom.updateDateTimeMin"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="—">
        <el-date-picker
          value-format="yyyy-MM-dd"
          style="width: 180px"
          v-model="selectFrom.updateDateTimeMax"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchBtn()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="tableList"
      border
      stripe
    >
      <el-table-column
        label="订单号"
        prop="orderId"
        width="90px"
      ></el-table-column>
      <el-table-column label="订单类型" prop="sourceOrderType">
        <template slot-scope="scope">
          <template v-if="scope.row.sourceOrderType == 'train'"
            >火车票</template
          >
          <template v-if="scope.row.sourceOrderType == 'flight'">机票</template>
          <template v-if="scope.row.sourceOrderType == 'hotel'">酒店</template>
          <template v-if="scope.row.sourceOrderType == 'vipCard'"
            >会员卡</template
          >
          <template v-if="scope.row.sourceOrderType == 'vipLounge'"
            >贵宾厅</template
          >
          <template v-if="scope.row.sourceOrderType == 'vipChannel'"
            >VIP通道</template
          >
        </template>
      </el-table-column>
      <el-table-column label="订单日期" prop="orderdate"></el-table-column>
      <el-table-column label="开票状态" prop="openStatus">
        <template slot-scope="scope">
          <template v-if="scope.row.openStatus == 'invoiceFailure'"
            >开票失败</template
          >
          <template v-if="scope.row.openStatus == 'invoiceSuccess'"
            >开票成功</template
          >
        </template>
      </el-table-column>
      <el-table-column label="购方抬头" prop="custname"></el-table-column>
      <!-- <el-table-column label="购方税号" prop="custtaxno" ></el-table-column>
      <el-table-column label="购方地址" prop="custaddress" ></el-table-column>
      <el-table-column label="购方电话" prop="custphone" ></el-table-column> -->
      <el-table-column label="商品名称" prop="goodsname"></el-table-column>
      <el-table-column label="含税金额" prop="taxamount"></el-table-column>
      <el-table-column label="开票时间" prop="createtime"></el-table-column>
      <el-table-column label="开票人" prop="createAdminName"></el-table-column>
      <el-table-column label="失败原因" prop="returnMessage"></el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="infoBtn(scope.row)"
            >详情</el-button
          >
          <el-button
            v-if="scope.row.openStatus == 'invoiceSuccess'"
            size="mini"
            type="primary"
            @click="down(scope.row)"
            >下载发票</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
    <!-- 详情弹窗 -->
    <el-dialog
      title="发票详情"
      :visible.sync="infoDialogVisible"
      :close-on-click-modal="false"
      width="60%"
      center
    >
      <el-descriptions class="margin-top" :column="3"  border>
        <el-descriptions-item>
          <template slot="label"> 开票状态 </template>
          {{
            infoObj.openStatus == "invoiceSuccess"
              ? "开票成功"
              : infoObj.openStatus == "invoiceFailure"
              ? "开票失败"
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 是否含行程单 </template>
          {{
            infoObj.haveitinerary == "1"
              ? "含"
              : infoObj.haveitinerary == "2"
              ? "不含"
              : infoObj.haveitinerary == "3"
              ? "仅有行程单"
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发票请求流水号 </template>
          {{ infoObj.swno }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销方税号 </template>
          {{ infoObj.sellertaxno }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销方名称 </template>
          {{ infoObj.sellertitle }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销方地址 </template>
          {{ infoObj.selleraddress }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销方电话 </template>
          {{ infoObj.sellerphone }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 销方银行账号 </template>
          {{ infoObj.sellerbankaccount }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 购方抬头 </template>
          {{ infoObj.custname }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 购方税号 </template>
          {{ infoObj.custtaxno }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 购方地址 </template>
          {{ infoObj.custaddress }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 购方电话 </template>
          {{ infoObj.custphone }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 购方邮箱 </template>
          {{ infoObj.custemail }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 购方银行账号 </template>
          {{ infoObj.custbankaccount }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 购方银行名称 </template>
          {{ infoObj.custbankname }}
        </el-descriptions-item>

        <!-- <el-descriptions-item>
          <template slot="label"> 购方银行名称 </template>
          {{ infoObj.custbankname }}
        </el-descriptions-item> -->

        <el-descriptions-item>
          <template slot="label"> 发票备注 </template>
          {{ infoObj.invmemo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发票类型 </template>
          {{
            infoObj.invtype == "0"
              ? "专用发票"
              : infoObj.invtype == "2"
              ? "普通发票"
              : infoObj.invtype == "51"
              ? "电子发票"
              : infoObj.invtype == "41"
              ? "卷式发票"
              : ""
          }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 开票类型 </template>
          {{
            infoObj.kpType == "0"
              ? "线上开具"
              : infoObj.kpType == "1"
              ? "线下开具"
              : ""
          }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 发票行性质 </template>
          {{
            infoObj.lineType == "0"
              ? "正常行"
              : infoObj.lineType == "1"
              ? "折扣行"
              : infoObj.lineType == "2"
              ? "被折扣行"
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 明细行号 </template>
          {{ infoObj.lineCode }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 开票人 </template>
          {{ infoObj.drawer }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 下载链接 </template>
          <span class="down" @click="down()">{{
            infoObj.invoiceresourcesurl
          }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="infoDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "invoiceRecord",
  data() {
    return {
      selectFrom: {
        orderId: "",
        sourceOrderType: "",
        openStatus: "",
        custname: "",
        createtimeMax: "",
        createtimeMin: "",
        pageNo: 1,
        pageSize: 10,
      },
      // 列表数据
      tableList: [
        {
          a: "",
        },
      ],
      // 详情数据
      infoObj: {},
      // 详情弹窗
      infoDialogVisible: false,
      // 分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
    };
  },
  methods: {
    // 分页
    handleSizeChange(value) {
      this.selectFrom.pageSize = value;
      this.queryInvoiceRecordList();
    },
    handleCurrentChange(value) {
      this.selectFrom.pageNo = value;
      this.queryInvoiceRecordList();
    },
    // 查询按钮
    searchBtn() {
      (this.selectFrom.pageNo = 1),
        (this.selectFrom.pageSize = 10),
        this.queryInvoiceRecordList();
    },
    // 查询发票记录列表
    queryInvoiceRecordList() {
      this.$axios
        .queryInvoiceRecordList({
          orderId: this.selectFrom.orderId,
          sourceOrderType: this.selectFrom.sourceOrderType,
          openStatus: this.selectFrom.openStatus,
          custname: this.selectFrom.custname,
          createtimeMax: this.selectFrom.updateDateTimeMin,
          createtimeMin: this.selectFrom.updateDateTimeMax,
          pageNo: this.selectFrom.pageNo,
          pageSize: this.selectFrom.pageSize,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.tableList = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
    },
    // 详情按钮
    infoBtn(row) {
      this.$axios
        .queryInvoiceRecordInfo({
          id: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.infoObj = res.data;
            this.infoDialogVisible = !this.infoDialogVisible;
          } else {
          }
        });
    },
    down(row) {
      console.log(row);
      if (row) {
        let obj = {
          swno : row.swno,
          sellerTaxNo : row.sellertaxno,
        }
        this.getinvoiceFPXZ(obj)
      } else {
         let obj = {
          swno : this.infoObj.swno,
          sellerTaxNo : this.infoObj.sellertaxno,
        }
        this.getinvoiceFPXZ(obj)
      }
    },
    // 发票下载
      getinvoiceFPXZ(row) {
      this.$axios
        .getinvoiceFPXZ(row)
        .then((res) => {
          if (res.code == "00000") {
            window.open(res.data, "_self");
          } else {
          }
        });
    },
  },
  mounted() {
    this.searchBtn();
  },
};
</script>

<style scoped>
.invoiceRecord {
  margin: 20px;
}
.down {
  cursor: pointer;
}
.down:hover {
  color: rgb(93, 122, 250);
}
</style>